<script setup lang="ts">
import { onUpdated, ref } from 'vue'
import {
    Minus,
    FullScreen,
    Close,
    MoreFilled,
    CopyDocument
} from '@element-plus/icons-vue'

const props = defineProps({
    title: {
        type: String,
        default: ''
    },
    closeType: {
        type: String,
        default: ''
    },
    closeIcon: {
        type: Object,
        default: Close
    },
    alwaysOnTop: {
        type: Boolean,
        default: false
    }
})

const emit = defineEmits(['quit'])

const handleQuit = () => {
    emit('quit')
}

defineExpose({
    handleQuit
})

const isFullScreen = ref(false)
const alwaysOnTop = ref(false)

const toggleAlwaysOnTop = () => {
    alwaysOnTop.value = !alwaysOnTop.value
    window.ipcRenderer.send('toggle-always-on-top')
}

const handleMinimize = () => {
    window.ipcRenderer.send('minimize')
}

const handleFullScreen = () => {
    isFullScreen.value = !isFullScreen.value
    window.ipcRenderer.send('full-screen', isFullScreen.value)
}

onUpdated(() => {
    alwaysOnTop.value = props.alwaysOnTop
})
</script>
<template>
    <el-row class="top drag" justify="end">
        <el-button-group class="no-drag">
            <el-button text @click="toggleAlwaysOnTop">
                <template #icon>
                    <img style="width: 15px;" v-if="alwaysOnTop" src="../../assets/wechat/top-selected.svg"
                        alt="top-selected">
                    <img style="width: 15px;" v-else src="../../assets/wechat/top.svg" alt="top">
                </template>
            </el-button>
            <el-button text :icon="Minus" @click="handleMinimize" />
            <el-button text :icon="isFullScreen ? CopyDocument : FullScreen" @click="handleFullScreen" />
            <el-button :class="closeType" text :icon="props.closeIcon" @click="handleQuit" />
        </el-button-group>
    </el-row>
    <el-row v-if="props.title" class="title drag" justify="space-between">
        <span>{{ props.title }}</span>
        <el-button class="no-drag" text>
            <template #icon>
                <el-icon :size="18">
                    <MoreFilled />
                </el-icon>
            </template>
        </el-button>
    </el-row>
</template>
<style lang="scss" scoped>
.top {
    user-select: none;

    .logo {
        display: flex;
        align-items: center;

        span {
            font-size: 14px;
        }
    }

    :deep(.el-button-group) {
        .el-button.danger.is-text:not(.is-disabled):hover {
            background-color: #ed4c4c;
            color: #ffffff;
        }
    }
}

.title {
    padding: 0 10px 5px 18px;
    border-bottom: 1px solid #d5d5d5;

    .el-button {
        width: 24px;
    }
}
</style>